<template>
  <div class="listTravelsIndexMain">
    <el-carousel v-if="rotationList.length > 0" id="myPhotoRotation">
      <template v-for="(item, index) in rotationList">
        <el-carousel-item>
          <img :src="item.imgurl" @click="onImageFn(item, index, 1)">
        </el-carousel-item>
      </template>
    </el-carousel>
    <div class="travelsIndexContainer">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="7" :md="7" :lg="7" :xl="7">
          <Feature :titleName="'目录检索'" class="listTravelsIndexQuery">
            <slot>
              <el-skeleton :rows="4" animated v-if="skeletonListType"/>
              <template v-for="(items, index) in travelsList">
                <div class="travelsLeftMain" @click="leftChange(items.id)"><span>{{ index+1 }}</span>{{items.title}}</div>
              </template>
            </slot>
          </Feature>
        </el-col>
        <el-col :xs="24" :sm="17" :md="17" :lg="17" :xl="17">
          <el-skeleton animated class="zylMB30" v-if="skeletonListType">
            <template #template>
              <el-skeleton-item variant="image" style="width: 100%; height: 200px" />
              <div class="zylSkeletonText">
                <el-skeleton-item variant="p" class="skeletonMb10"/>
                <el-skeleton-item variant="p" class="skeletonMb10"/>
                <el-skeleton-item variant="p" class="skeletonMb10"/>
                <el-skeleton-item variant="p" class="skeletonMb10"/>
              </div>
            </template>
          </el-skeleton>
          <div ref="ulScroll" id="myPhotoList">
            <template v-for="(item, index) in travelsList">
              <div class="travelsIndexFeature" :id="item.id">
                <img :src="item.imgurl" v-if="item.imgurl.substring(item.imgurl.length-4) !== '.mp4'" @click="onImageFn(item, index, 2)">
                <video muted autopla loop="loop" controls="controls" :src="item.imgurl" v-else></video>
                <div class="travelsIndexFeatureTitle">{{ item.title }}</div>
                <div class="travelsIndexFeatureTime">{{ item.creationtime }}</div>
                <div class="travelsIndexFeatureTime">{{ item.place }}</div>
                <div class="travelsIndexFeatureText" v-html="item.content"></div>
              </div>
            </template>
          </div>
          <div class="zylPaginationMain">
            <el-pagination background :total="pagList.total" :page-size="pagList.pageSize" @current-change="handlePageChange" layout="prev, pager, next"></el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 图片查看器 -->
    <ElImageViewer
            :isImageData="isImageData"
            :isImageList="rightImgList"
            v-if="showElImageViewer"
            @onImageViewerCallback="onImageViewerCallback" />
  </div>
</template>
<script>
import '@/assets/scss/index.scss';
import Feature from '@/components/Feature';
import Interface from './serve/api';
export default {
  // 记录生活
  name: 'travelsIndex',
  components: {
    Feature
  },
  data () {
    return {
      rotationList: [],
      travelsList: [],
      // 分页
      pagList: {
        total: 0,
        pageNum: 1,
        pageSize: 12,
      },
      skeletonListType: true,
      // 图片查看器
      showElImageViewer: false,
      isImageData: {
        imageUrl: '',
        imageTitle: '',
        imageIndex: 0,
      },
      rightImgList: [],
      // 存储图片
      rotationImageList: [],
      travelsImageList: [],
    };
  },
  mounted () {
    this.getRotationStateImgtype();
    this.getTravelsStateImgtype();
  },
  methods: {
    // 轮播图
    getRotationStateImgtype () {
      let params = {
        state: '是',
        imgtype: '游记展示',
      };
      Interface.getRotationStateImgtype(params).then(res => {
        if (res.status === 200) {
          this.rotationList = res.data;
          this.rotationList.map(item => {
            this.rotationImageList.push(
                {
                  id: item.id,
                  title: item.title,
                  isUrl: item.imgurl,
                }
            )
          })
        };
      })
    },

    // 游记列表
    getTravelsStateImgtype () {
      let params = {
        state: '是',
        place: '',
        title: '',
        pageNum: this.pagList.pageNum,
        pageSize: this.pagList.pageSize,
      };
      Interface.getTravelsStateImgtype(params).then(res => {
        if (res.status === 200) {
          this.skeletonListType = false;
          this.travelsList = res.data.list;
          this.travelsList.map(item => {
            this.travelsImageList.push(
                {
                  id: item.id,
                  title: item.title,
                  isUrl: item.imgurl,
                }
            )
          })
        };
      })
    },

    // 分页监听
    handlePageChange (val) {
      this.pagList.pageNum = val;
      this.getTravelsStateImgtype();
    },

    // 左侧目录检索
    leftChange (id) {
      let refsId = this.$refs.ulScroll.childNodes;
      refsId.forEach ((item, index) =>  {
        if (item.id == id) {
          item.scrollIntoView({behavior: "instant", block: "center", inline: "nearest"});
        };
      });
    },

    // 点击图片
    onImageFn (item, index, type) {
      if (type === 1) {
        this.rightImgList = this.rotationImageList
      } else {
        this.rightImgList = this.travelsImageList
      }
      this.isImageData.imageUrl = item.imgurl
      this.isImageData.imageTitle = item.title
      this.isImageData.imageIndex = index
      this.showElImageViewer = true
    },

    // 图片查看器回调
    onImageViewerCallback (item) {
      switch (item.type) {
        case 'close':
          this.showElImageViewer = false
          break
        case 'download':
          alert('下载')
          break
      }
    }
  },
}
</script>
